<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useSysRoleCrud} from "./useSysRoleCrud.ts"
import {dialogScheme, searchSchema, tableColumns} from "./schema.ts"
import type IFormExpos from "@/components/input/type/expose.ts"
import type SysRolePermissionResp from "@/view/role/type/resp/SysRolePermissionResp.ts";

const dialogFormRef = ref<IFormExpos | null>(null)

const {
  dialogModel,
  dialogVisible,
  loading,
  searchModel,
  tableModel,
  drawerVisible,
  treeData,
  currentRoleId,
  openDialog,
  page,
  reset,
  pageChange,
  closeDialog,
  addOrUpdate,
  deleteByIds,
  openDrawer,
  closeDrawer,
  checkedChange,
  updateRolePermissions
} = useSysRoleCrud()

const confirm = () => {
  dialogFormRef.value?.validate().then(isPass => {
    if (isPass) {
      addOrUpdate()
    } else {
      console.log("表单校验未通过")
    }
  })
}

onMounted(() => {
  page()
})
</script>

<template>
  <t-form :schema="searchSchema" v-model="searchModel">
    <template #operate>
      <div class="search-operate">
        <t-btn icon="search" type="primary" @click="page">搜 索</t-btn>
        <t-btn icon="reset" ghost @click="reset">重 置</t-btn>
      </div>
    </template>
  </t-form>

  <t-table :columns="tableColumns"
           :data="tableModel.records"
           :loading="loading">
    <template v-slot:header>
      <t-btn icon="plus" type="success" @click="openDialog(undefined)">新 增</t-btn>
      <t-btn icon="upload">导 入</t-btn>
      <t-btn icon="download">导 出</t-btn>
    </template>

    <template v-slot:roleType="{row}">
      <t-tag v-if="row.roleType === 1" type="primary" :code="row.id" label="系统角色"/>
      <t-tag v-if="row.roleType === 2" type="success" :code="row.id" label="部门角色"/>
    </template>

    <template v-slot:operate="{row}">
      <t-btn type="primary" text pageSize="small" @click="openDrawer(row.id)">授权</t-btn>
      <t-btn type="success" text pageSize="small" @click="openDialog(row)">编辑</t-btn>
      <t-btn type="danger" text pageSize="small" @click="deleteByIds([row.id])">删除</t-btn>
    </template>

    <template v-slot:footer>
      <t-pagination :pageNo="tableModel.current" :pageSize="tableModel.size" :total="tableModel.total"
                    @showSizeChange="pageChange" @change="pageChange"/>
    </template>
  </t-table>

  <!-- 新增或编辑的弹出框 -->
  <t-dialog :visible="dialogVisible" :title="dialogModel.id ? '编辑' : '新增'" @close="closeDialog"
            @confirm="confirm">
    <t-form ref="dialogFormRef" :schema="dialogScheme" v-model="dialogModel"/>
  </t-dialog>

  <!-- 授权页面 -->
  <t-drawer v-model:visible="drawerVisible" title="角色授权" size="25%" @close="closeDrawer"
            @confirm="updateRolePermissions">
    <t-tree :data="treeData"
            :check-strategy="(node: SysRolePermissionResp) => node.roleId === currentRoleId"
            @checked="checkedChange"
            default-expanded check all-check cancel-check recursive-check/>
  </t-drawer>
</template>

<style scoped>
.search-operate {
  display: flex;
}
</style>